<template>
	<div style="background-color: #FFFFFF;" id="devMainDiv">
		<div class="yunui-main-navbar" style="text-align: center;">
			<el-dropdown @command="handleApplicationCommand"
				style="position: absolute;left: 6px;top:16px;font-size: 18px;cursor: pointer;" size="medium">
				<span class="el-dropdown-link" style="color: white;">
					<i class="el-icon-menu"></i>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item :command="item.value" v-for="(item,index) in applicationList" :key="index">
							{{item.name}}
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<div style="position: absolute;left: 32px;top:12px;font-size: 18px;">
				{{applicationName}}
			</div>
			<MainSearchBox :menu="menu" @searchSelected="onSearchSelectedHandler"></MainSearchBox>
			<div style="position: absolute;right: 20px;top:7px;display: flex;flex-direction:row;">
				<el-badge :value="count" class="item" style="margin-top: 5px;" @click="onMyTaskClickHandler">
					<i class="el-icon-s-unfold" style="font-size: 26px;cursor: pointer;"></i>
				</el-badge>
				<i class="el-icon-s-grid" style="font-size: 26px;cursor: pointer;margin-top: 5px;margin-left:10px;"
					v-if="dashboardPage!=null && dashboardPage!=''" @click="onDashboardClickHandler()"></i>
				<div style="width:30px">&nbsp;</div>
				<img :src="avatarUrl" style="width: 32px;height: 32px;border-radius:50%;" />
				<el-dropdown @command="handleCommand" style="margin-top: 7px;margin-left:10px;" size="medium">
					<span class="el-dropdown-link" style="color: white;">
						{{username}}<i class="el-icon-caret-bottom"></i>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="changepassword">改变密码</el-dropdown-item>
							<el-dropdown-item command="exit">退出</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<div id="devMainContent" class="yunui-content">
			<MainSliderBar :itemList="moduleItemList" @itemClick="onItemClickHandler"></MainSliderBar>
			<MainNavTree :menuArray="menuArray" @itemClick="onMenuItemClickHandler"></MainNavTree>
			<MainPageContainer ref="mainPageContainer"></MainPageContainer>
		</div>
		<el-dialog v-model="changePasswordVisible">
			<el-row>
				<el-col :span="8">旧密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="oldPassword" type="password">
					</el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8">新密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="newPassword" type="password">
					</el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8">重复新密码</el-col>
				<el-col :span="16">
					<el-input size="mini" v-model="newPassword2" type="password">
					</el-input>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onChangePasswordOkHandler">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import MainSearchBox from '@/views/page/components/MainSearchBox.vue';
	import MainSliderBar from '@/views/page/components/MainSliderBar.vue';
	import MainNavTree from '@/views/page/components/MainNavTree.vue';
	import MainPageContainer from '@/views/page/components/MainPageContainer.vue';
	import $ from "jquery";
	import constants from '@/utils/constants.js';
	import router from '@/router';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: 'Main',
		components: {
			MainSearchBox,
			MainSliderBar,
			MainNavTree,
			MainPageContainer
		},
		data() {
			return {
				menu: undefined,
				moduleItemList: [],
				menuArray: [],
				username: "",
				dashboardPage: null,
				avatarUrl: constants.ROOT_URL + "main/getAvatar?X-Token=" + window.localStorage.getItem("token"),
				changePasswordVisible: false,
				oldPassword: "",
				newPassword: "",
				newPassword2: "",

				countHandler: "",
				count: 0,
				
				applicationList:[],
				applicationName:"",
			}
		},
		mounted() {
			window.document.title = constants.TITLE;
			this.$store.state.userMain = this;
			var that = this;
			this.axios.interceptors.response.use(function(response) {
				if (response.status === 200) {
					if (response.data.code == 2) {
						that.$router.push("loginpage");
					}
					return Promise.resolve(response);
				} else {
					return Promise.reject(response);
				}
			});
			this.axios.defaults.headers.common['X-Token'] = window.localStorage.getItem("token");
			$("#devMainDiv").height($(window).height());
			$("#devMainContent").height($(window).height() - 48);
			this.init();

			this.countHandler = setInterval(this.getCount, 6*60*1000);
		},
		methods: {
			getCount() {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/getCount").then(
					function(response) {
						if (response.data.code == 1) {
							that.count = response.data.count;
						}
					}
				);
			},
			init() {
				var that = this;
				restUtil.getAction(this,"main/init").then(
					function(response) {
						if (response.data.code == 1) {
							that.menu = response.data.menu;
							for (var i = 0; i < that.menu.children.length; i++) {
								if (i == 0) {
									that.menu.children[i]["selected"] = true;
									that.menuItem = that.menu.children[0];
								} else {
									that.menu.children[i]["selected"] = false;
								}
							}
							that.applicationList=response.data.applicationList;
							that.applicationName=response.data.applicationName;
							that.moduleItemList = that.menu.children;
							that.onItemClickHandler(0);
							that.username = response.data.username;
							that.dashboardPage = response.data.dashboardPage;
							for (i = 0; i < that.moduleItemList.length; i++) {
								var item = that.moduleItemList[i];
								item.icon = constants.ROOT_URL + "main/getMenuIconContent?menuId=" + item.id +
									"&X-Token=" + window.localStorage.getItem("token");
							}

							that.onDashboardClickHandler();
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onItemClickHandler(index) {
				var menuItem = this.menu.children[index];

				var menuArray = [];
				menuArray["name"] = menuItem.name;
				for (var i = 0; i < menuItem.children.length; i++) {
					if (menuItem.children == undefined) {
						continue;
					}
					if (menuItem.children[i].children == undefined) {
						continue;
					}
					menuItem.children[i]["group"] = true;
					menuArray.push(menuItem.children[i]);
					for (var j = 0; j < menuItem.children[i].children.length; j++) {
						menuArray.push(menuItem.children[i].children[j]);
					}
				}

				this.menuArray = menuArray;
				var that = this;
				restUtil.getAction(this,"main/getPageCodeByMenuId?menuId=" + menuItem.id).then(
					function(response) {
						if (response.data.code == 1) {
							if (response.data.pageCode == null || response.data.pageCode == "") {
								return;
							}
							that.$refs.mainPageContainer.loadPage({
								"name": menuItem.name,
								"menuType": "serverpage",
								"pageCode": response.data.pageCode
							});
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			onMenuItemClickHandler(item) {
				var that = this;
				restUtil.getAction(this,"main/getPageCodeByMenuId?menuId=" + item.id).then(
					function(response) {
						if (response.data.code == 1) {
							that.$refs.mainPageContainer.loadPage({
								"name": item.name,
								"menuType": response.data.menuType,
								"pageCode": response.data.pageCode
							});
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			handleCommand(command) {
				var that=this;
				if (command == "exit") {
					this.$confirm("确定退出吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						restUtil.postAction(this,"main/logout").then(
							function(response) {
								if (response.data.code == 1) {
									window.localStorage.removeItem("token");
									router.push("/");
								} else {
									that.$alert(response.data.message, '提示');
								}
							});
					}).catch(() => {

					});
				} else if (command == "changepassword") {
					this.changePasswordVisible = true;
				}
			},
			onSearchSelectedHandler(item) {
				this.onMenuItemClickHandler(item);
			},
			onMyTaskClickHandler() {
				this.$refs.mainPageContainer.loadPage({
					"name": "工作流任务管理",
					"menuType": "clientpage",
					"pageCode": "workflow-task-management"
				});
			},
			onChangePasswordOkHandler() {
				var that = this;
				restUtil.postAction(this,"main/changePassword?oldPassword=" + this.oldPassword +
					"&newPassword=" + this.newPassword + "&newPassword2=" + this.newPassword2).then(
					function(response) {
						if (response.data.code == 1) {
							that.$alert("修改成功", '提示');
							that.changePasswordVisible = false;
						} else {
							that.$alert(response.data.message, '提示');
						}
					});
			},
			onDashboardClickHandler() {
				if (this.dashboardPage != null && this.dashboardPage != "") {
					this.$refs.mainPageContainer.loadPage({
						"name": "Dashboard",
						"menuType": "serverpage",
						"pageCode": this.dashboardPage
					});
				}
			},handleApplicationCommand(applicationId){
				var that=this;
				restUtil.getAction(this,"main/onApplicationChangeHandler?applicationId="+applicationId).then(
					function(response) {
						if (response.data.code == 1) {
							that.menu = response.data.menu;
							for (var i = 0; i < that.menu.children.length; i++) {
								if (i == 0) {
									that.menu.children[i]["selected"] = true;
									that.menuItem = that.menu.children[0];
								} else {
									that.menu.children[i]["selected"] = false;
								}
							}
							that.applicationName=response.data.applicationName;
							that.moduleItemList = that.menu.children;
							that.onItemClickHandler(0);
							for (i = 0; i < that.moduleItemList.length; i++) {
								var item = that.moduleItemList[i];
								item.icon = constants.ROOT_URL + "main/getMenuIconContent?menuId=" + item.id +
									"&X-Token=" + window.localStorage.getItem("token");
							}
						}
					}
				);
			}
		},
	}
</script>

<style>
	
</style>
